<template>
  <view class="main">

    <view class="item">
      <blog-plate @onClickListener="onClick">表盘</blog-plate>
    </view>
    <view class="item">
      <blog-plate-chart progress="0.6"/>
    </view>


    <view class="item">
      <blog-plate @onClickListener="onClick" color="#33aaff">表盘</blog-plate>
    </view>
    <view class="item">
      <blog-plate-chart progress="0.85" color="#33aaff" degrees="30"/>
    </view>

    <view class="item">
      <blog-plate-chart :reverse="true" progress="0.6" side-line-style="width:120px;" color="#33aaff"/>
    </view>
    <view class="item">
      <blog-plate-chart progress="0.6" side-line-style="width:120px;" :stripe-style="stripeStyle"/>
    </view>

    <view class="item">
      <blog-plate @onClickListener="onClick" side-line-style="width:120px;" :side-line-colors="this.gradientLine">表盘
      </blog-plate>
    </view>
    <view class="item">
      <blog-plate-chart progress="0.2" @onClickListener="onClick" side-line-style="width:120px;"
                        :side-line-colors="this.gradientLine"/>
    </view>

    <view class="item">
      <blog-plate @onClickListener="onClick" side-line-style="width:120px;" :distance-percentage="0.4">表盘</blog-plate>
    </view>
    <view class="item">
      <blog-plate-chart progress="0.8" side-line-style="width:120px;"  lower-color="#fff" no-title  transition-value="0" :distance-percentage="0.4">
        60℃
      </blog-plate-chart>
    </view>


  </view>
</template>

<script lang="ts">

export default {
  data() {
    return {
      stripeStyle: "background:conic-gradient(#00e8a0 5%,#33aaff 25%,#f80a0a 55%,#cfcfcf 70%,#cfcfcf 100%)",
      gradientLine: [
        {color: this.getOpacityColor("#33aaff", 0), progress: 0.05},
        {color: this.getOpacityColor("#33aaff", 0.1), progress: 0.1},
        {color: this.getOpacityColor("#33aaff", 0.8), progress: 0.2},
        {color: this.getOpacityColor("#33aaff", 0.6), progress: 0.3},
        {color: this.getOpacityColor("#f80a0a", 0.5), progress: 0.5},
        {color: this.getOpacityColor("#f80a0a", 0.6), progress: 0.6},
        {color: this.getOpacityColor("#f80a0a", 0.7), progress: 0.7},
        {color: this.getOpacityColor("#e3129a", 0.8), progress: 0.8},
        {color: this.getOpacityColor("#e3129a", 0.9), progress: 0.9},
        {color: "#e3129a", progress: 1},
      ]
    }
  },
  methods: {
    onClick() {
      console.info('事件点击')
    },
    getOpacityColor(thisColor, thisOpacity) {
      let theColor = thisColor.toLowerCase();
      let r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      if (theColor && r.test(theColor)) {
        if (theColor.length === 4) {
          let sColorNew = "#";
          for (let i = 1; i < 4; i += 1) {
            sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
          }
          theColor = sColorNew;
        }
        let sColorChange = [];
        for (let i = 1; i < 7; i += 2) {
          sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)));
        }
        return "rgba(" + sColorChange.join(",") + "," + thisOpacity + ")";
      }
      return theColor;
    }
  }
}

</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 15px;
  box-sizing: border-box;
}

.item {
  flex: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
